﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Knockout+ Bootstrap examples</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Dependencies -->
    <link href="dependencies/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="dependencies/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="dependencies/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
    <script src="dependencies/jquery-1.11.0.min.js"></script>
    <script src="dependencies/knockout-3.0.0.js"></script>
    <script src="dependencies/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
    <script src="dependencies/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- /Dependencies -->

    <!-- Knockout+ Bootstrap -->
    <script src="knockoutplus/knockoutpuls.bootstrap.1.2.0.js"></script>
    <script src="knockoutplus/knockoutpuls.bootstrap.datepicker.1.2.0.js"></script>
    <!-- /Knockout+ core -->

    <!-- Apply view model -->
    <script>
        function IconViewModel()
        {
            var $private = this;
            var $public = {};

            $public.icon = ko.observable("fire");

            return $public;
        }

        function ModalViewModel()
        {
            var $private = this;
            var $public = {};

            $public.visible = ko.observable(false);
            $public.keyboard = ko.observable(true);
            $public.remote = ko.observable("core.html");
            $public.backdrop = ko.observable(true);

            $public.show = function ()
            {
                $public.visible(true);
            }

            $public.hide = function ()
            {
                $public.visible(false);
            }

            return $public;
        }

        function PopoverViewModel()
        {
            var $private = this;
            var $public = {};

            $public.visible = ko.observable(false);

            $public.toggle = function ()
            {
                $public.visible(!$public.visible());
            }

            return $public;
        }

        function DateValueViewModel()
        {
            var $private = this;
            var $public = {};

            $public.dateValue = ko.observable(new Date(2000, 0, 1));

            $public.setToday = function ()
            {
                var date = new Date();
                $public.dateValue(new Date(date.getYear(), date.getMonth(), date.getDate()));
            }

            $public.setBirthday = function ()
            {
                $public.dateValue(new Date(1983, 3, 6));
            }

            return $public;
        }

        $(function ()
        {
            $(".vmIcon").each(function () { ko.applyBindings(new IconViewModel(), this); });
            $(".vmModal").each(function () { ko.applyBindings(new ModalViewModel(), this); });
            $(".vmPopover").each(function () { ko.applyBindings(new PopoverViewModel(), this); });
            $(".vmDateValue").each(function () { ko.applyBindings(new DateValueViewModel(), this); });
        });
    </script>
    <!-- /Apply view model -->
</head>

<body>
    <div class="container">
        <h2>Binding type: icon</h2>
        <p>
            This binding type allows to bind display one of Bootstrap's glyphicons by just using icon name (without prefix).<br />
        </p>

        <div class="vmIcon">
            <strong>Asterisk icon example:</strong>
            <span data-bind="icon: 'asterisk'"></span>
            <pre>&lt;span data-bind=&quot;icon: &#39;asterisk&#39;&quot;&gt;&lt;/span&gt;</pre>
        </div>

        <div class="vmIcon">
            <strong>Headphones icon example:</strong>
            <span data-bind="icon: 'headphones'"></span>
            <pre>&lt;span data-bind=&quot;icon: &#39;headphones&#39;&quot;&gt;&lt;/span&gt;</pre>
        </div>

        <div class="vmIcon">
            <strong>Binding icon to observable property example:</strong>
            <span data-bind="icon: icon"></span>
            <pre>viewModel.icon = ko.observable(&quot;fire&quot;);
&lt;span data-bind=&quot;icon: icon1&quot;&gt;&lt;/span&gt;</pre>
        </div>
        <br />



        <h2>Binding type: modal</h2>
        <p>
            This binding type allows to show and hide Bootstrap's modal component.<br />
            It is possible to use data attributes (data-show, data-keyboard, data-remote, data-backdrop) as well as bind to view model's properties (but the latter have precedence).
        </p>

        <div class="vmModal">
            <strong>Simple example:</strong>
            <pre>&lt;div data-bind=&quot;modal: { show: visible }&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/button&gt;
                &lt;h4 class=&quot;modal-title&quot;&gt;Title&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;Body&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
            <button data-bind="click: show">Show modal</button>

            <div data-bind="modal: { show: visible }" class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Title</h4>
                        </div>
                        <div class="modal-body">Body</div>
                    </div>
                </div>
            </div>
        </div>
        <br />

        <div class="vmModal">
            <strong>Remote content example:</strong>
            <pre>&lt;div data-bind=&quot;modal: { show: visible }&quot; data-remote=&quot;hello.html&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
        &lt;div class=&quot;modal-content&quot; style=&quot;padding: 20px;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
            <button data-bind="click: show">Show modal</button>

            <div data-bind="modal: { show: visible }" class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content" style="padding: 20px;"></div>
                </div>
            </div>
        </div>
        <br />



        <h2>Binding type: popover</h2>
        <p>
            This binding type allows to show and hide Bootstrap's popover component.<br />
            It is possible to use data attributes (data-placement, data-title, data-content, etc) as well as bind to view model's properties (but the latter have precedence).
        </p>
        <br />

        <pre>&lt;div data-bind=&quot;popover: { show: visible, title: &#39;Some title&#39;, html: true, content: &#39;&lt;h1&gt;Content&lt;/h1&gt;&#39; }&quot;&gt;&lt;/div&gt;</pre>

        <div class="vmPopover">
            <button data-bind="click: toggle">Toggle popover</button>

            <div data-bind="popover: { show: visible, title: 'Some title', html: true, content: '<h1>Content</h1>' }"
                 style="width: 120px; height: 40px; border: solid 1px gray; margin-top: 10px;"></div>
        </div>
        <br />



        <h2>Binding type: dateValue</h2>
        <p>
            This binding type make possible to display calendar and bind Date values.<br />
            Bootstrap not contain out of the box datepicker control, so this binding type uses external library
            <a href="http://www.eyecon.ro/bootstrap-datepicker/" rel="nofollow">http://www.eyecon.ro/bootstrap-datepicker/</a>.
        </p>

        <div class="vmDateValue">
            <strong>Exmaple 1:</strong>
            <pre>&lt;input data-bind=&quot;dateValue: { value: dateValue, format: &#39;dd-mm-yyyy&#39;, lang: &#39;en&#39; }&quot; /&gt;</pre>
            <span>Selected date is </span><strong data-bind="html: dateValue"></strong>
            <br />
            <input data-bind="dateValue: { value: dateValue, format: 'dd-mm-yyyy', lang: 'en' }" />
            <button data-bind="click: setToday">Set today</button>
            <button data-bind="click: setBirthday">Set 06-04-1987</button>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
</body>
</html>
